<!-- 评价 -->
<template>
	<Card>
		<template  #head>
			 <view class="u-flex">
			 	 <view class="u-flex-1">
			 	 	评价
			 	 </view>
				 <view class="u-flex-1 " :style="'text-align:right;'+'color:'+''+EvaluationText.color">
				 		{{EvaluationText.text}}
				 </view>
			 </view>
		</template>
		<template #body>
			<view class="wrapper-body">
				<ul class="rate">
					<li class="border-bottom">
						<span class="label">
							服务态度
						</span>
						<view class="value">
							<u-rate :gutter="40" :count="rateParams.count" active-color="#EBB917"
								inactive-color="#98A5B3" v-model="evaluationData.manner"></u-rate>
			
						</view>
					</li>
					<li class="border-bottom">
						<span class="label">
							服务质量
						</span>
						<view class="value">
							<u-rate :gutter="40" :count="rateParams.count" active-color="#EBB917"
								inactive-color="#98A5B3" v-model="evaluationData.quality"></u-rate>
			
						</view>
					</li>
					<li class="border-bottom">
						<span class="label">
							响应时效
						</span>
						<view class="value">
							<u-rate :gutter="40" :count="rateParams.count" active-color="#EBB917"
								inactive-color="#98A5B3" v-model="evaluationData.responseTimeliness"></u-rate>
			
						</view>
					</li>
				</ul>
				<view class="rate-input">
					<u-input type="textarea" placeholder="意见与建议 请填写或语音输入意见与建议" v-model="evaluationData.text">
					</u-input>
				</view>
			</view>
		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	export default {
		components:{
			Card
		},
		data(){
			return {
				rateParams: {
					count: 5
				},
				evaluationData: { 
					// 态度
					manner: 5,
					// 质量
					quality: 5,
					// 响应实效
					responseTimeliness: 5,
					//意见
					text: '',  
				},
			}
		},
			
		computed:{
			/**
			 * 非常满意 15  7,193,96,1
			 * 满意 12 <= 15	  112,179,45,1
			 * 一般 9 <=12	235,185,23,1
			 * 不满意 6<= 9	230,129,57,1
			 * 非常不满意 0<= 6	254,108,108,1
			 */
			EvaluationText() {
				let colors = {
					verySatisfied: 'rgba(7,193,96,1)',
					staisfied: 'rgba(112,179,45,1)',
					generally: 'rgba(235,185,23,1)',
					dissatisfied: 'rgba(230,129,57,1)',
					veryDissatisfied: 'rgba(254,108,108,1)'
				}
			
				let texts = {
					verySatisfied: '非常满意',
					staisfied: '满意',
					generally: '一般',
					dissatisfied: '不满意',
					veryDissatisfied: '非常不满意',
				}
				let rateData = {
					// 态度
					manner: this.evaluationData.manner,
					// 质量
					quality: this.evaluationData.quality,
					// 响应实效
					responseTimeliness: this.evaluationData.responseTimeliness,
				}
				let rateValues = Object.values(rateData)
				let rateCount = rateValues.reduce((a, b) => {
					return a + b
				})
				let params = {
					text: '暂无评分',
					color: '#ccc'
				}
				if (rateCount > -1 || rateCount) {
					if (rateCount === 15) {
						params = {
							color: colors.verySatisfied,
							text: texts.verySatisfied
						}
			
					} else if (rateCount < 15 && rateCount >= 12) {
						params = {
							color: colors.staisfied,
							text: texts.staisfied
						}
					} else if (rateCount < 12 && rateCount >= 9) {
						params = {
							color: colors.generally,
							text: texts.generally
						}
					} else if (rateCount < 9 && rateCount >= 6) {
						params = {
							color: colors.dissatisfied,
							text: texts.dissatisfied
						}
			
					} else {
						params = {
							color: colors.veryDissatisfied,
							text: texts.veryDissatisfied
						}
					}
				}
				return Object.assign(params, {
					rateCount: rateCount || 0
				})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rate {
		&-input {
			margin-top: 38rpx;
		}
	
		li {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
			}
	
			.value {
				flex: 1;
				margin-left: 46rpx;
			}
		}
	}
</style>